import React, { Component } from 'react';
class skzj extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      username:'',
      password:''
    }
  }
  render() { 
    return ( 
      <div>
        <div>受控组件</div>
          {/* <form action="/bdzj" onSubmit={this.handleSubmit}> */}
          <form onSubmit={this.handleSubmit}>
            账号：<input onChange={this.obtainName} type="text" name="username"></input>
            密码：<input onChange={this.obtainPassword} type="password" name="password"></input>
          <button>登陆</button>
        </form>
      </div>
    );
  }
  handleSubmit=(event)=>{
    event.preventDefault(); //阻止默认事件    组织form 表单的默认跳转刷新    
    console.log(this.state)
  }
  obtainName = (event) => {
    console.log(event.target.value)
    this.setState({
      username:event.target.value
    })
  }
  obtainPassword = (event) => {
    console.log(event.target.value)
    this.setState({
      password:event.target.value
    })
  }
}
 
export default skzj;